<template>
  <div>
    <a-spin :spinning="isLoading">
      <a-form :model="editForm" name="edit-form" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off"
        @finish="editPost">
        <a-form-item label="&nbsp;" name="">
          <span style="font-size: 18px;font-weight: bold;">{{ props.menuName }}</span>
        </a-form-item>
        <a-form-item label="菜单名" name="name" :rules="[{ required: true, message: '请输入菜单名' }]">
          <a-input v-model:value="editForm.name" placeholder="请输入菜单名" />
        </a-form-item>
        <a-form-item label="菜单key" name="key" :help="keyHelp"
          :rules="[{ required: true, message: '请输入菜单key' }]">
          <a-input v-model:value="editForm.key" placeholder="请输入菜单key" />
        </a-form-item>
        <a-form-item label="跳转链接" name="url" help="不要填写/admin/（最终生成的链接是“/admin/此处输入的跳转链接”）。若不填写则生成的链接是（/admin/上级菜单key/此处的菜单key）" v-if="editForm.level == 2">
          <a-input v-model:value="editForm.url" placeholder="请输入跳转链接" />
        </a-form-item>
        <a-form-item label="菜单icon" name="icon" help="菜单小图标，此处只填写图片名（最终对应的图片地址是/public/static/img/admin/menu/菜单icon.png。如果是vue项目则此处输入的值需要同步修改@components/admon/menu.vue中的iconToImg变量）" :rules="[{ required: true, message: '请输入菜单icon' }]" v-if="editForm.level == 1">
          <a-input v-model:value="editForm.icon" placeholder="请输入菜单icon" />
        </a-form-item>
        <a-form-item label="显示顺序" name="sort" help="请输入显示顺序。范围1~9999，越小越靠前"
          :rules="[{ required: true, message: '请输入显示顺序。范围1~9999，越小越靠前' }]">
          <a-input-number v-model:value="editForm.sort" :min="1" :max="9999" placeholder="请输入显示顺序。范围1~9999，越小越靠前"
            style="width: 100%;" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">立即提交</a-button>
          <a-button @click="editCancel" style="margin-left:10px;">取消</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup>
import { ref,inject } from 'vue';
import { message } from 'ant-design-vue';
import { editAdminMenu } from "@/api/admin";   //引入api

const { refreshCurrentPage } = inject('refreshCurrentPage');  // 依赖注入--刷新当前页面

const isLoading = ref(false);    // 控制loading
const props = defineProps(['pid', 'level', 'menuName']);  // 接收父组件传参

const editForm = ref({
  pid: props.pid,
  level: props.level,
  sort: 999,
});  // 编辑表单

const keyHelp = ref('请输入菜单key。子菜单没有配置跳转链接时，此key将用于生成链接使用（最终链接是/admin/此处的菜单key/子菜单key）');
if (props.level == 2) {
  keyHelp.value = '请输入子菜单key。此处没有配置跳转链接时，此key将用于生成链接使用（最终链接是/admin/上级菜单key/此处的菜单key）';
}


// 获取接口数据列表
const editPost = () => {
  isLoading.value = true;

  editAdminMenu(editForm.value).then((res) => {
    if (res === false) return;

    message.success('操作成功，即将跳转……');
    setTimeout(() => { editCancel() }, 1000);
  }).catch((rej) => {
    isLoading.value = false;
    message.error('失败：' + rej);
  });
};

// 跳转到列表页
const editCancel = () => {
  isLoading.value = false;
  refreshCurrentPage();
}
</script>

<style scoped></style>